<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <!-- <row-header :rows="rowList">
                <div>123</div>
            </row-header> -->
            <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <span class="s1"
                            ><span
                                style="
                                    color: red;
                                    position: relative;
                                    top: 2px;
                                    margin-right: 2px;
                                "
                                >*</span
                            >{{ $t('basics.renwumingchen') }}</span
                        >
                        <p>
                            <a-input
                                v-model="form.task_name"
                                :placeholder="$t('basics.renwumingchenText')"
                            />
                        </p>
                    </div>
                    <div>
                        <span class="s1">
                            <span
                                style="
                                    color: red;
                                    position: relative;
                                    top: 2px;
                                    margin-right: 2px;
                                "
                            >
                                * </span
                            >{{ $t('basics.xiangmu') }}</span
                        >
                        <p>
                            <a-input v-model="projectName" disabled />
                        </p>
                    </div>
                    <div>
                        <a-popover po1ition="bottom">
                            <img
                                src="@/assets/images/waring.png"
                                alt=""
                                style="height: 24px; cursor: pointer"
                            />
                            <template #content>
                                <div class="tem-txt">
                                    <p>{{ $t('basics.textOne') }}</p>
                                    <p>{{ $t('basics.textTwo') }}</p>
                                </div>
                            </template>
                        </a-popover>
                    </div>
                    <div>
                        <a-popover position="top">
                            <a-button
                                @click="importButton"
                                type="primary"
                                class="w-full lg:w-auto mt-2 lg:mt-0"
                            >
                                <img
                                    src="@/assets/images/ic_shangc.png"
                                    alt=""
                                    style="
                                        cursor: pointer;
                                        width: 13px;
                                        height: 13px;
                                        margin-right: 6px;
                                    "
                                />
                                <span>
                                    {{ $t('basics.shangchuan') }}
                                    <span
                                        v-if="
                                            projectKey &&
                                            projectKey != 'america'
                                        "
                                    >
                                        {{ projectName }} 任务
                                    </span>
                                </span>
                            </a-button>
                            <template #content>
                                <div class="tem-txt">
                                    <p>{{ $t('basics.textOne') }}</p>
                                    <p>{{ $t('basics.textTwo') }}</p>
                                </div>
                            </template>
                        </a-popover>
                    </div>
                    <div>
                        <a-button
                            type="secondary"
                            @click="refresh"
                            class="w-full lg:w-auto mt-2 lg:mt-0"
                        >
                            <template #icon>
                                <icon-refresh />
                            </template>
                            {{ $t('basics.shuaxin') }}
                        </a-button>
                    </div>
                </div>
                <a-row :gutter="16">
                    <a-col>
                        <div
                            class="container-content-header"
                            style="
                                font-size: 16px;
                                font-weight: bold;
                                height: 50px;
                                line-height: 50px;
                            "
                        >
                            <span
                                class="tasks"
                                v-if="appStore.language == 'zh_CN'"
                            >
                                <span class="text-[red] mr6">{{
                                    username
                                }}</span>
                                <span>{{ $t('basics.derenwu') }}</span>
                            </span>
                            <span class="tasks" v-else>
                                <span>{{ $t('basics.derenwu') }}</span>
                                <span class="text-[red]">{{ username }}</span>
                            </span>
                            <span class="tasks ml20"
                                >{{ $t('basics.suiduofasong')
                                }}<span
                                    class="text-[red]"
                                    style="margin: 0 6px"
                                    >{{ totalNum }}</span
                                >{{ $t('basics.tiao') }}</span
                            >
                        </div>
                        <a-table
                            :stripe="true"
                            :columns="columns"
                            :data="userTaskList"
                            :pagination="false"
                            class="text-[#fff]"
                            style="color: #fff !important"
                        >
                            <template #status="{ record }">
                                <span v-if="record.status == 1">{{
                                    $t('basics.weikaishi')
                                }}</span>
                                <span v-if="record.status == 2">{{
                                    $t('basics.jingxingzhong')
                                }}</span>
                                <span v-if="record.status == 3">{{
                                    $t('basics.tingzhi')
                                }}</span>
                                <span v-if="record.status == 4">{{
                                    $t('basics.yiwancheng')
                                }}</span>
                            </template>

                            <template #operate="{ record }">
                                <div class="flex">
                                    <a-link
                                        status="danger"
                                        @click="deleteTask(record)"
                                    >
                                        {{ $t('basics.shanchu') }}</a-link
                                    >
                                    <a-link
                                        v-if="record.status == 1"
                                        @click="changeStatus(record, 2)"
                                        >{{ $t('basics.kaishi') }}</a-link
                                    >
                                    <a-link
                                        status="danger"
                                        v-if="record.status == 2"
                                        @click="changeStatus(record, 3)"
                                        >{{ $t('basics.zanting') }}</a-link
                                    >
                                    <a-link
                                        v-if="record.status == 3"
                                        @click="changeStatus(record, 2)"
                                        >{{ $t('basics.jixu') }}</a-link
                                    >
                                    <a-link @click="toDetail(record.id)">{{
                                        $t('basics.xiangqing')
                                    }}</a-link>
                                </div>
                            </template>
                        </a-table>
                    </a-col>
                </a-row>
            </div>
            <ma-import
                :render-to-body="false"
                ref="crudImportRef"
                :upLoadData="importFile"
                @success="refresh"
            />
        </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
import {
    getProjectList,
    getUserprojectDetail,
    getUserTaskList,
    deleteUserTask,
    updateStatus
} from '@/api/america/massProduction.js';
import rowHeader from '@/components/row-header/index.vue';
import { useAppStore } from '@/store';
import { getProjectId } from '@/api/cloud/userProject.js';
import MaImport from './components/import.vue';
import getUserInfo from '@/store/modules/user';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import Message from '@/views/userCenter/message.vue';
const { t } = useI18n();
const appStore = useAppStore();
const username = getUserInfo().user.username;
const { proxy } = getCurrentInstance();

const rowList = ref([
    {
        label: '任务名称',
        type: 'input',
        tips: '请输入任务名称',
        required: true,
        data: null
    },
    {
        label: '项目',
        type: 'input',
        tips: '请选择项目',
        required: true,
        disabled: true,
        data: null
    }
]);

const crudImportRef = ref();
const form = ref({});
const loading = ref(false);
const projectList = ref([]);
const totalNum = ref(0);
const userTaskList = ref([]);
const projectKey = ref();
const projectName = ref();
const columns = [
    {
        title: t('basics.xuhao'),
        dataIndex: 'id',
        minWidth: 60,
        align: 'left'
    },
    {
        title: t('basics.kaishishijian'),
        dataIndex: 'began_at',
        minWidth: 180,
        slotName: 'began_at',
        ellipsis: true,
        tooltip: true,
        align: 'left'
    },
    {
        title: t('basics.renwumingchen'),
        dataIndex: 'task_name',
        minWidth: 100,
        align: 'left',
        ellipsis: true,
        tooltip: true
    },
    {
        title: t('basics.jihuafasong'),
        dataIndex: 'num_of_need_message',
        minWidth: 150,
        align: 'left'
    },
    // {
    //   title: '已发送数量',
    //   dataIndex: 'num_of_pop',
    //   minWidth:150,
    //   align: 'center'
    // },
    {
        title: t('basics.chenggongshuliang'),
        dataIndex: 'num_of_pop',
        minWidth: 100,
        align: 'left'
    },
    // {
    //   title: '失败数量',
    //   dataIndex: 'num_of_failed',
    //   minWidth:100,
    //   align: 'center'
    // },
    // {
    //   title: '未发送数量',
    //   dataIndex: 'num_of_not_send',
    //   minWidth:150,
    //   align: 'center'
    // },
    {
        title: t('basics.createAt'),
        dataIndex: 'created_at',
        ellipsis: true,
        tooltip: true,
        minWidth: 200,
        align: 'left'
    },
    {
        title: t('basics.status'),
        dataIndex: 'status',
        minWidth: 100,
        slotName: 'status',
        align: 'left'
    },
    {
        title: t('basics.controls'),
        dataIndex: 'operate',
        width: 150,
        slotName: 'operate',
        align: 'left'
    }
];
const importFile = ref({
    url: 'cloud/userTask/importPic', //pic_tn
    // url: 'cloud/userTask/import', //america
    params: form.value
});
// 获取美国短信id
const getId = () => {
    getProjectId({ project_key: 'america' }).then((res) => {
        form.value.project_id = res.data.id;
        projectName.value = res.data.project_name;
        projectKey.value = res.data.project_key;
        if (res.data.project_key == 'america') {
            importFile.value.url = 'cloud/userTask/import';
        } else if (res.data.project_key == 'pic_tn') {
            importFile.value.url = 'cloud/userTask/importPic';
        }
        getUserTask();
        getUserproject();
    });
};

// 获取最多发送条数
const getUserproject = () => {
    getUserprojectDetail({ project_id: form.value.project_id }).then((res) => {
        if (res.data) {
            if (res.data.num_of_message_available) {
                totalNum.value = res.data.num_of_message_available;
            }
        }
    });
};
const importButton = (params) => {
    if (form.value.task_name) {
        crudImportRef.value.open();
    } else {
        proxy.$message.error(t('basics.renwumingchenText'));
    }
};
const getProject = () => {
    getProjectList().then((res) => {
        projectList.value = res.data.items;
    });
};

//   导入成功后
const refresh = () => {
    getUserTask();
    getUserproject();
};
const router = useRouter();
const toDetail = async (id) => {
    try {
        await router.push({ name: 'america:taskDetail', query: { id } });
    } catch (error) {
        if (error.isNavigationFailure) {
            // 处理导航失败的情况
            console.error('Navigation failed due to permissions', error);
        } else {
            proxy.$message.error('没有权限');
        }
    }
};
const getUserTask = () => {
    loading.value = true;
    getUserTaskList({ project_id: form.value.project_id }).then((res) => {
        userTaskList.value = res.data.items;
        loading.value = false;
    });
};
// 修改状态
const changeStatus = (row, num) => {
    proxy.$modal.warning({
        title: t('basics.xitongtishi'),
        content: t('basics.contentText'),
        hideCancel: false,
        cancelText: t('basics.concel'),
        okText: t('basics.sure'),
        simple: false,
        onOk: () => {
            updateStatus({ id: row.id, status: num }).then((res) => {
                if (res.code == 200) {
                    proxy.$message.success(t('basics.controlsSecc'));
                } else {
                    proxy.$message.error(res.message);
                }
                getUserTask();
            });
        }
    });
};

const deleteTask = (row) => {
    proxy.$modal.warning({
        title: t('basics.xitongtishi'),
        content: t('basics.deleteContent'),
        hideCancel: false,
        cancelText: t('basics.concel'),
        okText: t('basics.sure'),
        simple: false,
        onOk: () => {
            deleteUserTask({ id: row.id }).then((res) => {
                if (res.code == 200) {
                    proxy.$message.success(t('basics.controlsSecc'));
                } else {
                    proxy.$message.error(res.message);
                }
                getUserTask();
            });
        }
    });
};

getId();
getProject();
</script>
<script>
export default { name: 'america:massProduction' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
</style>
